
<template>

<div id='logo' >
    <div style="position:absolute">   
        <transition name="el-fade-in-linear">
            <el-card class="box-card"  style="text-align: center"    @keyup.enter.native="login" >
                 <div class="loginPart">
                        <div slot="header" class="clearfix" style="text-align: center" >
                            <h2 style="font-size: 1rem" >高校疫情防控管理系统</h2>
                        </div>
                        <div style="height: 1.3rem"></div>
                        <el-input prefix-icon="el-icon-user-solid"  v-model="input_user" placeholder="请输入用户名" class="inp" ></el-input>
                        <div style="height: 1.3rem"></div>
                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="input_pwd" show-password class="inp" ></el-input>

                        <el-radio-group v-model="radio3" size="small" style="display: flex;justify-content: space-around;margin-top: 1.3rem;">
                        <el-radio label="1" border>管理员</el-radio>
                        <el-radio label="2" border>学生</el-radio>
                        <el-radio label="3" border>教师</el-radio>
                        </el-radio-group>
                        <el-button type="primary" class="button" size="small"  @click="login">登录</el-button>
                 </div>
            </el-card>
        
        </transition>
    </div>
   
</div>

</template>




<script>
export default {
    name:'Login',
    data() {
    return {
        input_user: '',
        input_pwd:'',
        radio3: "1",
    }
  },
  methods:{
      /**
       * 登录
       * 用户名：username:this.input_user,
       * 密码：password:this.input_pwd,
       */
      login(){
          if (!this.input_user || !this.input_pwd){
                this.open3("用户名,密码不能为空")
              this.input_user=""
              this.input_pwd=""
          }else{
            this.$Axios({
                url:'/users/login',
                method:'post',
                data:{
                    username:this.input_user,
                    password:this.input_pwd,
                    type:this.radio3
                },
                success:(result)=>{
                 if (result=="用户名或者账号输入错误"){
                     this.$message.error("用户名或者账号输入错误")
                     this.input_pwd=""
                     this.input_user=""
                 }else{
                     window.localStorage.setItem("token",result.jwt_token)
                     //方便后来群聊使用
                     const socketData={
                         "id":result.loginData[0].id,
                         "name":result.loginData[0].username,
                         "img":result.loginData[0].head,
                         }
                    window.localStorage.setItem("socketData",JSON.stringify(socketData))
                    //  window.localStorage.setItem("id",id);
                     if (this.radio3==1)  window.location.href=' http://localhost:80/#/admin/home'
                     if (this.radio3==2)  window.location.href=' http://localhost:80/#/student/home'
                     if (this.radio3==3)  window.location.href=' http://localhost:80/#/teacher/home'
                 }
                }
            })
          }
    },


      open3(v) {
          this.$message({
              message:v,
              type: 'warning'
          });
      },
  }
}
</script>

<style lang="scss" scoped>



.loginPart{
    position:fixed;
    /*定位方式绝对定位absolute*/
    top:50%;
    left:50%;
    /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
    transform:translate(-50%,-50%);
    /*实现块元素百分比下居中*/
    width:400px;
    padding:50px;
    background: #fff0;
    box-shadow: 0px 15px 25px #fff0;
    /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
    border-radius:15px;
    /*边框圆角，四个角均为15px*/
  }
 
  

    .login{
        h3{
            text-align: center;
            height: 60px;
            line-height: 30px;
            
        
        }
            .inp{
            margin-top: 10px;
        
        }
        .button{
            margin-top: 20px;
            position: fixed;transform: translateX(-50%);
            
        }
        

    }
    .box-card {
     width: 0px;
}
    #logo{
    background: url("../../assets/R-C.jpeg");
    background-size: 100% 100%;
    height: 100%;
    position:fixed;
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background-position: center
  }
</style>